<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Box Tests</title>
        <meta name="viewport" content="width=device-width">
        <style>
            body {
                padding: 60px;
	-webkit-perspective: 600px;
	   -moz-perspective: 600px;
		 -o-perspective: 600px;
			perspective: 600px;
            }
			
			.footer {
				position: relative;
				border-top: 1px solid #aaa;
				border-left: 1px solid gray;
				border-right: 1px solid gray;
				border-bottom: 1px solid gray;
				border-radius: 5px 0px 5px;
				background-color: thistle;
			}
			.contentbox {
				position: static;
				width: 500px;
				border-radius: 0px 0px 5px 5px;
				height: auto;
				background-color: white;
			}
			
			.contentbox:hover {
				box-shadow: 3px 3px 3px #ccc;
			}

			.header {
				font-family: sans-serif;
				border-radius: 5px 5px 0px 0px ;
				border-top: 1px solid gray;
				border-left: 1px solid gray;
				border-right: 1px solid gray;
				border-bottom: 1px solid gray;
				box-shadow: 0px 2px 0px #ccc;
				margin-bottom: 2px;
				font-size: 24px;
				padding: 5px 15px;
				cursor: pointer;
				/* cancel text select */
				-moz-user-select: none;
				-khtml-user-select: none;
				-webkit-user-select: none;
				user-select: none;
background: -moz-linear-gradient(top,  rgba(30,87,153,1) 0%, rgba(125,185,232,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#007db9e8',GradientType=0 ); /* IE6-9 */


			}
			
			.contentbox.closed .header {
				box-shadow:none;
			}
			
			.content {	
			border-left: 1px solid gray;
				border-right: 1px solid gray;
				padding: 15px;
				overflow: auto;
				max-height: 250px;
			}
			.icon {
				width: 16px;
				position: absolute;
				left: 5px;
				top: 4px;
			}
			.info {
				position: relative;
				width: 90%;
				margin: 2px 30px;
				text-align: right;
			}
			
			[draggable] {
			  -moz-user-select: none;
			  -khtml-user-select: none;
			  -webkit-user-select: none;
			  user-select: none;
			  /* Required to make elements draggable in old WebKit */
			  -khtml-user-drag: element;
			  -webkit-user-drag: element;
			}
			
			#testbox {
				height: 200px;
				width: 200px;
				background: peru;
			}
			#testbox:before {
				content: "before";
				height: 50px;
				width: 50px;
				border-top: 5px solid #fff;
				border-right: 1px solid #fff;
				border-left: 1px solid #fff;
				border-bottom: 1px solid #fff;
			}
			#testbox:after {
				height: 0;
				width: 200px;
				content:"";
				position: absolute; 
				border-top: 30px solid blue; 
				border-left: 30px solid white;  
				border-right: 30px solid white; 
				border-bottom: 30px solid blue; 
				margin: 140px 0 0 0;
			}
        </style>
		<script type="text/javascript" language="javascript">
			document.addEventListener('DOMContentLoaded', function(e){
				var contentbox = document.getElementById('box1'),
					boxheader = document.getElementById('box1-header'),
					boxcontent = document.getElementById('box1-content'),
					boxfooter = document.getElementById('box1-footer');
				
				App.Events.bindToDomEvent(['dragstart'], boxheader);
				App.Events.bindToDomEvent(['dragend'], contentbox);
				App.Events.bindToDomEvent(['click'], boxheader);
				
				App.Events.subscribe(boxheader.id + '-click', 'header click', boxheader, function(e){
					//e.evt.preventDefault();
					e.evt.stopPropagation();
					boxcontent.style.display = (boxcontent.style.display == "none") ? "block" : "none";
					if ( /closed/.test(contentbox.className)){
						contentbox.className = contentbox.className.replace(/\ closed/,'');
					} else {
						contentbox.className += " closed";
					}
				});				
				
				App.Events.subscribe(contentbox.id + '-dragstart', 'box drag start', contentbox, function(e){
					//e.evt.preventDefault();
					e.evt.stopPropagation();
					this.style.opacity = '0.4';
				});
				
				App.Events.subscribe( contentbox.id + '-dragend', 'box drag end', contentbox, function(e){
					//e.evt.preventDefault();
					console.log(e);
					e.evt.stopPropagation();
					var x = e.evt.layerX,
						y = e.evt.layerY;
					this.style.webkitTransform = 'translate3d(' + x + 'px,' + y + 'px, 5px)';
					this.style.opacity = '1';
				});

			});
		</script>
    </head>
    <body>
		<div id="box1" class="contentbox" draggable="true">
			<div id="box1-header" class="header">
				<div class="title">Content Title</div>
			</div>
			<div id="box1-content" class="content">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vestibulum, nisl nec hendrerit feugiat, felis turpis dignissim risus, eu congue mi tortor id nulla. Suspendisse id ante dui. Pellentesque nibh elit, consectetur in faucibus ut, pellentesque vel diam. Sed vestibulum velit ac ligula facilisis viverra. Nulla sodales egestas justo, ut suscipit lacus pharetra nec. Sed interdum eros ut sem pretium pretium. Nulla turpis velit, rutrum in sagittis eu, mattis eu velit. Curabitur non augue in ante luctus accumsan non ac magna. Praesent sit amet neque orci, sed fringilla lacus. In viverra, urna vitae malesuada aliquam, felis augue rutrum risus, in fringilla ligula magna pellentesque augue. Quisque scelerisque hendrerit tellus nec laoreet.

				Vestibulum sit amet dui est. Nullam ut magna erat. Cras neque enim, fringilla in ultrices id, semper posuere est. Proin vitae hendrerit arcu. Mauris imperdiet purus eu urna aliquet ac vehicula diam pulvinar. Morbi lorem arcu, cursus at vestibulum vulputate, lacinia blandit sapien. Suspendisse iaculis pretium nibh quis fringilla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam imperdiet rutrum sodales. Quisque porttitor est in augue vulputate eget faucibus diam mattis. Vestibulum quis tortor vel mi consectetur fermentum eu quis nunc. Pellentesque vitae augue sapien. Ut a convallis libero. Etiam varius, nunc sed vulputate tristique, turpis mi volutpat nulla, et suscipit nisl urna accumsan mi. Nullam vestibulum congue laoreet. In hac habitasse platea dictumst.

				Cras tempus lectus dapibus lectus porta vitae luctus nibh malesuada. Mauris vel pharetra turpis. Sed dui sapien, mollis et luctus eget, volutpat ac mauris. Donec erat augue, dictum quis interdum ac, scelerisque non dolor. Fusce lacus quam, venenatis a feugiat quis, scelerisque nec massa. Pellentesque id molestie metus. Morbi ut magna nunc. Aenean quis quam ut leo bibendum feugiat vitae ut risus. Duis felis ligula, bibendum ut lacinia in, dignissim sed erat. Suspendisse faucibus vulputate sapien nec commodo. Maecenas viverra gravida odio, nec tincidunt turpis cursus ut.
			</div>
			<div id="box1-footer" class="footer">
				<img class="icon" src="img/glyphicons/glyphicons_410_facebook.png" />
				<div class="info">5/12/2013 4:02 PM PST</div>
			</div>
		</div>
		
		<div id="testbox"></div>
		
		<script type="text/javascript" src="js/events.js"></script>
		<script type="text/javascript" src="js/keycommands.js"></script>
    </body>
</html>